<template>
  <ContentField>
    <div
      class="user-register d-flex justify-content-center align-items-center animate__animated animate__bounceIn">
      <div class="row modal-bg">
        <div class="d-flex justify-content-center align-items-center">
          <h2 class="register-title">欢迎注册</h2>
        </div>
        <div class="clo-3">
          <form @submit.prevent="register">
            <div class="mb-3">
              <label for="username" class="form-label"></label>
              <input
                v-model="username"
                type="text"
                class="form-control"
                id="username"
                placeholder="请输入账号" />
            </div>
            <div class="mb-3">
              <label for="password" class="form-label"></label>
              <input
                v-model="password"
                type="password"
                class="form-control"
                id="password"
                placeholder="请输入密码" />
            </div>
            <div class="mb-3">
              <label for="confirmedPassword" class="form-label"></label>
              <input
                v-model="confirmedPassword"
                type="password"
                class="form-control"
                id="confirmedPassword"
                placeholder="请再次输入密码" />
            </div>
            <!-- <div class="error_message">{{ error_message }}</div> -->
            <button type="submit" class="btn btn-outline-info">注册</button>
          </form>
        </div>
      </div>
    </div>
  </ContentField>
</template>

<script>
import ContentField from "@/components/ContentField.vue";
import { ref } from "vue";
import router from "@/router/index";
import $ from "jquery";
import { toast } from "vue3-toastify";

export default {
  components: {
    ContentField,
  },
  setup() {
    let username = ref("");
    let password = ref("");
    let confirmedPassword = ref("");
    // let error_message = ref("");

    const register = () => {
      $.ajax({
        url: "http://127.0.0.1:3000/user/account/register/",
        type: "post",
        data: {
          username: username.value,
          password: password.value,
          confirmedPassword: confirmedPassword.value,
        },
        success(resp) {
          if (resp.error_message === "success") {
            toast("注册成功,现在可以登录了~", {
              theme: "auto",
              type: "success",
              position: "top-right",
              autoClose: 1000,
              hideProgressBar: true,
              dangerouslyHTMLString: true,
              transition: "slide",
            });
            setTimeout(() => {
              router.push({ name: "user_account_login" });
            }, 1000);
          } else {
            toast(resp.error_message, {
              theme: "auto",
              type: "warning",
              position: "top-right",
              autoClose: 1000,
              hideProgressBar: true,
              dangerouslyHTMLString: true,
              transition: "slide",
            });
            // error_message.value = resp.error_message;
          }
        },
        error(resp) {
          console.log(resp);
        },
      });
    };

    return {
      username,
      password,
      confirmedPassword,
      // error_message,
      register,
    };
  },
};
</script>

<style scoped>
.user-register {
  height: 100%;
  width: 100%;
}

.register-title {
  color: white;
}

.modal-bg {
  border: 1px solid rgba(13, 202, 240, 0.5);
  background: linear-gradient(
    to right,
    rgba(13, 202, 240, 0.1) 0%,
    rgba(20, 26, 32, 0.1) 50%,
    rgba(13, 202, 240, 0.1) 100%
  );
  backdrop-filter: blur(100px);
  padding: 20px;
  border-radius: 10px;
  animation: pulse 2s linear infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 10px rgba(0, 128, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 0 20px rgba(0, 128, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(0, 128, 255, 0);
  }
}

button {
  width: 100%;
}

button:hover {
  color: white;
}

/* div.error_message {
  color: red;
} */
</style>
